@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

.web{
	scroll-behavior: smooth;
	main{
		perspective: 3px;
		
		
		.bg{
			background-size: cover;
			// width: 100vw;
			width: 100%;
			height: 100%;
			z-index: -2;
			background-attachment: fixed;
			// background-image: url("../images/3.jpg");
			position: absolute;
		}	
		.top{
			
			margin: 0 auto;
			.swiper{
				position: relative;
				width: 77vw;			
				height: 39vw;
				overflow: hidden;
				--swiper-navigation-color: white;
				.swiper-wrapper{
					.swiper-slide{
						width: 77vw;
						height: 39vw;
						overflow: hidden;
						img{
							width: 100%;
						}				
					}
				}
			}
		}
		
		.center{
			width: 52.4vw;
			margin: 0 auto;
			padding-bottom: 4vw;
			h2{
				font-size: 1.5vw;
				font-weight: normal;
				letter-spacing: 0vw;
				padding-top: 6vw;
				text-align: center;
			}
			p{
				font-size: 1vw;
				font-weight: normal;
				letter-spacing: 0vw;
				line-height: 2vw;
				padding-top: 1vw;
				padding-bottom: 1vw;
				text-align: justify;
			}
			
			.imgBox{
				width: 52.4vw;
				height: 28vw;
				overflow: hidden;
				padding-top: 1vw;
				padding-bottom: 1vw;
				img{
					width: 100%;
				}
			}
			
		}
		
		.bottom{
			width: 100%;
			height: 40vw;
			background-image: url(../images/newsDetailbg.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
}

@media screen and (max-width:767px) {
	.web{
		main{
			.top{
				
				.swiper{
					width: 90%;
					height: 40vw;
					.swiper-button-prev:after {
					    // content: 'prev';
					    font-size: 6vw;
					}
					
					.swiper-button-next:after {
					    // content: 'next';
					    font-size: 6vw;
					}
				}
			}
			
			.center{
				width: 60vw;
				h2{
					// transform: scale(1.2);
					font-weight: bold;
				}
				p{
					line-height: 4vw;
				}
				.imgBox{
					width: 100%;
				}
			}
		}
	}
}